<template >
<div class="user-info">
  <div class="activity-box clearfix">
    <a v-if="$store.state.aiExtensionShow" :href="$store.state.aiExtension" target="_blank" class="ai-extension" :class="{oem_7moor:$store.state.oemObj.oemFlag}"></a>
    <a v-if="$store.state.newSkill" :href="$store.state.newSkill" target="_blank" class="new-skill" :class="{oem_7moor:$store.state.oemObj.oemFlag}">
      <img
        :src="$store.state.newSkillImg" alt="">
    </a>
  </div>
  <div class="version-tip" v-show="versionFlag && refreshPage">
      <span class="close" @click.stop="closeRefresh">X</span>
      <div class="title-tip">{{$t('public.newVersion')}}</div>
<!--<el-button type="primary" @click.stop="reload" class="primary_btn">刷新</el-button>-->
      <div class="refresh" @click.stop="reload"><i class= "iconfont icon-shuaxin"></i></div>
  </div>
  <!--<div class="logout" @click="showLogout">-->
    <!--<i class="iconfont icon-tuichu"></i>-->
  <!--</div>-->
    <div class="user-info1" data-v-7moor>
      <div class="logout" data-v-7moor>
        <div style="flex: 1; margin-top: 8px;">
          <el-tooltip class="item" effect="dark" :content="speedTip" placement="bottom">
              <span class="img-url" :class="imgPath == 'good'? 'img-good' : imgPath == 'error'? 'img-error' : imgPath == 'better'? 'img-better' : imgPath == 'weak1'? 'img-weak1' : 'img-weak'"></span>
          </el-tooltip>
        </div>
        <div @mousedown.stop @click.stop="showNotify" style="flex: 1;">
          <el-badge :value="undealNum" :max="99" class="item notice-bage" v-show="undealNum !== 0">
            <i  class="iconfont icon-xiaoxitongzhi"></i>
          </el-badge>
          <i  class="iconfont icon-xiaoxitongzhi" v-show="undealNum === 0"></i>
        </div>
        <i class="iconfont icon-tuichu" @click="showLogout"></i>
      </div>
      <div class="user-pic" data-v-7moor>
        <UserPic></UserPic>
      </div>
      <div class="ways" data-v-7moor>
        <WaysOfAnswer></WaysOfAnswer>
      </div>
      <shortcut-key>
        <i class="iconfont shortcutKey icon-kuaijiejian-01 global-km__icon"></i>
        <!-- <div style="height: 52px;line-height: 52px;">快捷键</div> -->
      </shortcut-key>
      <!--oem没有服务工单和帮助中心-->
      <el-popover
        placement="bottom"
        width="400"
        v-if="powerObj.isKm"
        @show="globalKmShow"
        v-model='$store.state.isShowTransCallLibrary'
        trigger="click">
        <knowledgebasetab></knowledgebasetab>
        <!-- <km-search ref="kmSearch" class="global-km__body" :handle="['preview', 'copy']" type="global"></km-search> -->
        <div slot="reference" class="global-km__icon">
          <i class="iconfont icon-zhishikujiansuo"></i>
        </div>
      </el-popover>
      <div class="help"  v-if="!$store.state.oemObj.oemFlag && !flag">
        <popover-novice
          :isDivShow="false"
          v-if="!getNoviceKeyStatus.noviceGuide && isLogined && !$store.state.session.user.isAdmin"
          style="position: absolute;right: -12px;top: 25px;"
          noviceKey="noviceGuide"
          trigger="click"
          :transition="popoverTransition"
          @updateGuidanceSuccess="updateGuidanceSuccess"
          :noviceHtml = "{title: '', text: $t('userInfo.noviceGuide')}"
        ></popover-novice>
        <el-dropdown class="rel-operation" trigger="click" @command="plus" size="small">
          <span>
            <!--<i class="iconfont icon-gongdan"></i><span class="name-status fr" data-v-7moor>寻求帮助<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
            <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
          </span>
          <el-dropdown-menu slot="dropdown" class="dropdown-menu-userInfo">
            <el-dropdown-item class="ro-dropdown" command="noviceGuide">{{$t('public.newUserGuide')}}</el-dropdown-item>
            <!-- <el-dropdown-item class="ro-dropdown after-sale-webchat" command="advisory">{{$t('public.AfterSalesConsultation')}}</el-dropdown-item> -->
            <el-dropdown-item v-show="isHaveMenu('simple_config_guide') && (isHaveMenu('show_simple_config') || isHaveMenu('default_show_simple_config'))" class="ro-dropdown" command="moreHelp">{{$t('public.AskForHelp')}}</el-dropdown-item>
            <el-dropdown-item v-show="isHaveMenu('simple_config_guide') && (isHaveMenu('show_simple_config') || isHaveMenu('default_show_simple_config'))" class="ro-dropdown" command="/index/ServiceBusinessList">{{$t('public.serviceTickets')}}</el-dropdown-item>
            <el-dropdown-item class="ro-dropdown" command="help">{{$t('public.helpCenter')}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-dialog :close-on-click-modal="false"
                 class="logout-dialog"
                 modal-append-to-body lock-scroll
                 append-to-body
                 top="10%"
                 :title="$t('cti.isSignOut')"
                 :visible.sync="logoutVisible"
                 width="30%">
        <el-row>
          <el-col v-show="cardList.length" :span="24" class="webchat-warning">
            <i class="el-icon-warning"></i>
            <span>{{$t('webchat.logoutWarningText')}}</span>
          </el-col>
          <el-col :span="24">
            <el-checkbox v-model.trim="checked" v-if="!flag">{{$t('cti.afterOut')}}</el-checkbox>
          </el-col>
          <el-col :span="24" v-show="closeMobile">
            <el-checkbox v-model.trim="closeMobileStatus">{{$t('webchat.judgeMobilelLogout')}}</el-checkbox>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="logoutVisible = false" class="primary_btn" >{{$t('public.cancel')}}</el-button>
          <el-button type="primary" class="primary_btn" @click="logout">{{$t('public.confirm')}}</el-button>
        </span>
      </el-dialog>
      <el-dialog :close-on-click-modal="false"
                 custom-class="bind-dialog"
                 :showClose='false'
                 modal-append-to-body lock-scroll
                 append-to-body
                 top="10%"
                 :visible="workNumberBindingStatus"
                 center
                 width="30%"
                 >
        <span>{{$t('cti.bindingTips')}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="windowReloadCencle" class="primary_btn" >{{$t('public.RefreshLater')}}</el-button>
          <el-button type="primary" class="primary_btn" @click="windowReload">{{$t('public.RefreshImmediately')}}</el-button>
        </span>
      </el-dialog>
    </div>
      <notifyContent
        :source="source"
        :busType="busType"
        :agents="agents"
        ref="notifyContent"></notifyContent>
    <novice-guide ref="noviceGuide" @updateLoginTime="updateLoginTime" v-if="!flag"></novice-guide>
</div>
</template>
<script>
  import notifyContent from './notifyContent'
  import WaysOfAnswer from './WaysOfAnswer'
  import UserPic from './UserPicNew'
  import { isHasMenu } from '@/utils/m7Utils.js'
  import popoverNovice from '../novice-boot/popoverNovice'
  import noviceGuide from './noviceGuide'
  import ShortcutKey from './ShortcutKey'
  import bus from '@/store/eventBus'
  import kmSearch from '@/components/public-modules/km-search/index.vue'
  import knowledgebasetab from './knowledgebasetab.vue'
  export default {
    name: 'UserInfo',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        busType: [],
        agentsFlag: false,
        agents: {},
        notify: false,
        speedTip: '已断网',
        versionFlag: false,
        logoutVisible: false,
        checked: true,
        spend: 'brokenNetwork',
        imgPath: 'error',
        _heig: 0,
        version: '',
        noneFlag: false,
        closeMobile: false, // 是否关闭
        closeMobileStatus: false,
        cardList: [],
        source: [],
        refreshPage: false,
        getNoviceKeyStatus: {noviceGuide: true} ,
        popoverTransition: '', // 新手引导popover弹窗动效
        isLogined: true, // 是否登录过帐号
        powerObj: {
          isKm: false
        }
      }
    },
    beforedestroy: {},
    watch: {
    },
    computed: {
      navMenuState () {
        return this.$store.state.navMenuState || false
      },
      undealNum () {
        return this.$store.state.cti.globalLet.undealNum || 0
      },
      workNumberBindingStatus () {
        return this.$store.state.cti.globalLet.work_number_binding_status
      }
    },
    methods: {
      closeRefresh () {
        this.refreshPage = false
      },
      // 弹框打开时，关门preview
      globalKmShow () {
        this.$refs.kmSearch && this.$refs.kmSearch.globalKmShow()
      },
       // 更新新手引导展示状态
      updateGuidanceSuccess (status) {
        let guidance = this.$getCache('guidance') || {noviceGuide: true}
        this.getNoviceKeyStatus = {noviceGuide: guidance.noviceGuide}
      },
      updateLoginTime () {
        if (!this.isLogined) {
          this.isLogined = true
          window.setTimeout(() => {
            let node = this.$el.querySelector('.novice-circle-group')
            node && node.click()
            this.$nextTick(() => {
              this.popoverTransition = ''
            })
          }, 400)
        }
      },
      isHaveMenu (func) {
        return isHasMenu(func, this.$store.state.session.user)
      },
      // 帮助
      plus (path) {
        if (path === 'advisory') {
          this.openWebchat()
        } else if (path === 'noviceGuide') {
          this.$refs.noviceGuide && this.$refs.noviceGuide.open()
        } else if (path === 'moreHelp') {
          let isNewConfig = this.$route.fullPath.split('/')[2]
          if (isNewConfig === 'newConfig') {
            this.$router.push({path: '/index/newConfig/moreHelp'})
          } else {
            // bug处理，其他路由跳到更多引导
            this.$router.push({path: '/index/newConfig', query: {active: 'moreHelp'}})
          }
        } else if (path !== 'help') {
          this.$router.push({path})
        } else {
          window.open('//help.7moor.com/', '_blank')
        }
      },
//      咨询在线咨询访客端
      openWebchat () {
        let iWidth = window.screen.availWidth * 0.4   // 弹出窗口的宽度;  40%
        let iHeight = window.screen.availHeight * 0.6   // 弹出窗口的高度;  60%
        let iLeft = (window.screen.availWidth - 10 - iWidth) / 2   // 获得窗口的水平位置;
        let iTop = (window.screen.availHeight - 30 - iHeight) / 2   // 获得窗口的垂直位置;
        let accout = this.$store.state.session.account.account
        let clientId = this.$store.state.session.account._id
        let name = this.$store.state.session.account.name
        let companyName = this.$store.state.session.account.companyName
        let nickName = accout + '_' + name
        window.open('https://webchat.7moor.com/wapchat.html?accessId=e9eaa8c0-3bff-11e9-8d5d-2b68914a0e7c&fromUrl=&urlTitle=&clientId=' + clientId + '&otherParams={"nickName":"' + nickName + '"}&customField={"账户编号":"' + accout + '","账户名":"' + name + '","公司名称":"' + companyName + '"}', 'newwindow', 'height=' + iHeight + ', width=' + iWidth + ', ' + 'top=' + iTop + ', left=' + iLeft, 'resizable:no', 'scrollbars:yes')
      },
      //  展开通知列表
      showNotify () {
        this.$nextTick(() => {
          this.$refs.notifyContent.showNotify(this.agentsFlag)
        })
      },
      reload () {
        window.location.reload()
      },
      initData () {
        let time1 = new Date().getTime()
        let _spend = 0
        let url = window.location.origin + '/static/version/version.json?rand=' + Math.random()
        window.fetch(url, {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .then(response => response.json())
        .then((res) => {
          this.speedTip = ''
          let time2 = new Date().getTime()
          _spend = (time2 - time1)
          if (res) {
            if (_spend < 100) {
              this.imgPath = 'good'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 100 && _spend < 200) {
              this.imgPath = 'better'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 200 && _spend < 500) {
              this.imgPath = 'weak'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 500) {
              this.imgPath = 'weak1'
              this.speedTip = `${_spend}ms`
            }
            window.localStorage.setItem('version', res.version)
            window.sessionStorage.setItem('version', res.version)
            this.versionFlag = false
          } else {
            this.speedTip = this.$t('public.duan')
            this.imgPath = 'error'
          }
        }).catch((res) => {
          this.speedTip = this.$t('public.duan')
          this.imgPath = 'error'
        })
      },
      fetData () {
        let time1 = new Date().getTime()
        let _spend = 0
        let url = window.location.origin + '/static/version/version.json?rand=' + Math.random()
        window.fetch(url, {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .then(response => response.json())
        .then((res) => {
          this.speedTip = ''
          let time2 = new Date().getTime()
          _spend = (time2 - time1)
          if (res) {
            if (_spend < 100) {
              this.imgPath = 'good'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 100 && _spend < 200) {
              this.imgPath = 'better'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 200 && _spend < 500) {
              this.imgPath = 'weak'
              this.speedTip = `${_spend}ms`
            } else if (_spend > 500) {
              this.imgPath = 'weak1'
              this.speedTip = `${_spend}ms`
            }
            if (window.sessionStorage.version) {
              if (window.sessionStorage.getItem('version') !== res.version) {
                this.versionFlag = true
                this.version = res.version
              } else {
                this.versionFlag = false
              }
            } else {
              window.localStorage.setItem('version', res.version)
              window.sessionStorage.setItem('version', res.version)
              this.versionFlag = false
            }
          } else {
            this.speedTip = this.$t('public.duan')
            this.imgPath = 'error'
          }
        }).catch((res) => {
          this.speedTip = this.$t('public.duan')
          this.imgPath = 'error'
        })
      },
      speedChange () {
        let self = this
        window.setInterval(function () {
          self.fetData()
        }, 10000)
      },
      showLogout () {
        if (this.$store.state.webchat.webchatList.webchat_todo) {
          this.cardList = this.$store.state.webchat.webchatList.webchat_todo.list || []
        }
        this.$store.dispatch('judgeMobileClient', {}).then((res) => {
          if (res) {
            // 判断移动端领取会话是否开启
            this.closeMobile = res.closeMobile
            this.closeMobileStatus = false
            this.logoutVisible = true
            /*
                        this.$confirm(this.$t('webchat.judgeMobileClient'), '', {
                          confirmButtonText: this.$t('public.confirm'),
                          cancelButtonText: this.$t('public.cancel'),
                          cancelButtonClass: 'primary_btn',
                          confirmButtonClass: 'primary_btn',
                          type: 'warning'
                        }).then(() => {
                          this.$store.dispatch('closeMobileClaimWebchatSession', {closeMobile: true}).then(resp => {
                            this.logoutVisible = true
                          })
                        }).catch(() => {
                          this.logoutVisible = true
                        })
                        */
          }
        })
      },
      logout () {
        if (this.closeMobileStatus) {
          this.$store.dispatch('closeMobileClaimWebchatSession', {closeMobile: true}).then(resp => {
            this.logoutVisible = false
            window.localStorage.setItem('logout', this.$data.checked)
            this.$store.dispatch('ctiExit', !this.$data.checked)
          })
        } else {
          this.$store.dispatch('pcInitiativeLogout', {})
          this.logoutVisible = false
          window.localStorage.setItem('logout', this.$data.checked)
          this.$store.dispatch('ctiExit', !this.$data.checked)
        }
      },
      backToOldVersion () {
        this.$store.dispatch('statisticsReport', 'change_to_old_version')
      },
      listenerFun () {
        this.$nextTick(() => {
          this.$refs.notifyContent.listenerFun()
        })
      },
      windowReload () {
        window.location.reload()
      },
      windowReloadCencle () {
        this.$store.commit('WORK_NUMBER_BINDING_STATUS', false)
      }
    },
    beforeDestroy () {
      document.removeEventListener('mousedown', this.listenerFun)
      bus.$off('showCustQuickReply')
    },
    components: {
      notifyContent,
      WaysOfAnswer,
      UserPic,
      popoverNovice,
      noviceGuide,
      kmSearch,
      ShortcutKey,
      knowledgebasetab
    },
    mounted () {
      document.addEventListener('mousedown', this.listenerFun)
      console.log(this.$store.state.xlsxExportMode)
      console.log(this.$store.state.iframeNotify)
      if (this.isHaveMenu('nav_km')) {
        this.powerObj.isKm = true
      }
      this.refreshPage = false
      // 超管和oem帐号不显示新手导航
      if (!this.$store.state.session.user.isAdmin && !this.$store.state.oemObj.oemFlag) {
        this.updateGuidanceSuccess()
        // 判断用户是否登录过系统
        this.isLogined = !!this.$store.state.session.user.lastLoginTime
        if (!this.isLogined ) {
          this.$refs.noviceGuide && this.$refs.noviceGuide.open()
          this.popoverTransition = 'bounce'
        }
      }
      if (window.sessionStorage.getItem('refreshPage') === 'true') {
        this.refreshPage = true
      }
//      获取座席列表 当通知中有工单的时候 根据座席id去显示座席名称
      let p1 = this.$store.dispatch('getCache', {type: 'businessFlowStep'})
      let p2 = this.$store.dispatch('getCache', {type: 'agents'})
      let p3 = this.$store.dispatch('getCache', {type: 'businessFlow'})
      let p4 = this.$store.dispatch('getCache', { type: 'custTmpls' })
      Promise.all([p1, p2, p3, p4]).then(([res1, res2, res3, custTmpls]) => {
        let custTmpl = custTmpls[0] || []
        this.source = custTmpl.source || []
        let myMap = {}
        for (var key in res2) {
          myMap[res2[key]._id] = res2[key]
        }
        this.busType = res3
        this.agents = myMap
        this.agentsFlag = true
      })
      let booleanFlag = window.localStorage.getItem('logout')
      if (booleanFlag === 'true') {
        booleanFlag = true
      } else {
        booleanFlag = false
      }
      this.$data.checked = booleanFlag
      this.initData()
      this.speedChange()
      let self = this
      bus.$on('showCustQuickReply', (msg) => {
        if (msg.data) {
          self.isShowQuickReply = true
        } else {
          self.isShowQuickReply = false
        }
      })
    }
  }
</script>
<style lang="stylus">
  .bind-dialog
    .el-dialog__body
      text-align center
      font-size 16px
</style>
<style scoped lang="stylus">
@import "../../../assets/common.styl"

.shortcutKey
  color #808080
  font-size 17px
  position relative
  top -1px
.bind-dialog
  text-align center
.icon
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
.user-info1
  float right
  height 100%
  border-right 1px solid $c-border1
  .help
    padding-right 15px
    position relative
    .rel-operation
      padding-top 17px
.user-info1 > div
  float right
  height 100%
  border-right 1px solid $c-border1
.user-info
  height 100%
  .ellipsis
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  .height-20
    height 20px
  .float-l
    float left
  .clear-fl
    clear both
  .padd-l-10
    padding-left 10px
  .padd-l-5
    padding-left 5px
  .version-tip
    position absolute
    border none
    background-color: rgba(87,186,183,1)
    right 0px
    width 100%
    z-index 10000
    color #fff
    height 52px
    .close
      position: absolute;
      top: 17px;
      left: 12px;
      font-size: 16px;
      cursor pointer
    div
      font-weight: 100
      padding-left: 15px
  .ways
    min-width 140px
    text-align right
    white-space nowrap
  .user-pic
    min-width 113px
  .logout
    width 120px
    background-size 18px auto
    border-right 0
    color #808080
    font-weight bold
    text-align center
    line-height 52px
    cursor pointer
    display flex
    .iconfont
      font-size 20px
      font-weight normal
  .back-old-V a
    color $cf-white
    display block
    width 90px
    height 30px
    text-align center
    line-height 30px
    background-color $c-main
    margin 10px 20px
    border-radius 3px
  .back-old-V a:hover
    background-color $c-main
  .icon-tuichu
    flex 1
  .title-tip
    width calc(100% - 70px)
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top 20px
    margin-left 20px
  .refresh
    color #fff
    width: 25px;
    position: absolute;
    right: 10px;
    top: 20px;
    cursor pointer
  .notify
    background: #fff;
    z-index: 10000;
    position: absolute;
    top: 53px;
    width: 328px;
    right: 10px;
    border: none;
    box-shadow: rgba(0,0,0,0.3)0px 3px 9px;
    border-radius 4px
    .content
      max-height calc(100vh - 145px);
      overflow-y auto
      position relative
      .no-notice
        font-size 14px
        text-align center
        margin 8px 0px
        color $cf-gray4
      .time1
        visibility visible
        padding-right 10px
      .opt-btn
        visibility hidden
        position: absolute;
        right: 0px;
      .icon-guanbi
        margin-left 10px
        font-size 12px
        margin-right 10px
        cursor pointer
      ul
        li
          padding: 10px 0px;
          border-bottom: 1px solid #ccc;
          padding-left: 8px;
          max-height 50px
          margin 0px 2px
          cursor pointer
          position relative
          .icon
            color $cf-gray3
            height 40px
            width: 24px;
            padding-top: 4px;
          .dynamic
            margin-left 28px
            .title
              width: 174px;
              float: left;
              font-size: 14px;
              color: $cf-gray4;
              line-height: 14px;
            .time
              font-size 12px
              color: $cf-gray4;
              float: right;
              width: 100px;
              text-align: right
              position relative
          .noread-cont
            font-size 12px
            color $cf-gray1
          .read-cont
            font-size 12px
            color $cf-gray1
          .read-cont1
            color $cf-gray4
        li:hover
          background #ddecfc
          .time1
            visibility hidden
          .opt-btn
            visibility visible
        .active
          background $list-active

  .tooltip-i1
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 13px solid transparent
    border-bottom-color: rgba(0,0,0,0.9);
    top: 40px;
    right: 48px;
    border-top-width: 0;
    font-size: 12px;
  .tooltip-i1:after
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 13px solid transparent
    border-bottom-color: #f5f5f5;
    top: 0px;
    right: -13px;
    border-top-width: 0;
    content: " ";
    z-index 10000
  .notice-cont
    clear: both;
    width: 100vw;
    height: 100vh;
    position: relative;
    margin-top: -54px;
    border-width: 6px;
  .notify-title
    height 45px
    background: #f5f5f5
    color $cf-gray3
    position relative
    .type-menu
      z-index: 100;
      transform-origin: center top 0px;
      position: absolute;
      top: 45px;
      left: 0px;
      width: 150px;
      background: #fff;
      box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
      ul
        margin 3px 0px
        li
          padding 5px 0px
          padding-left 15px
          position relative
        li:hover
          background #ddecfc
          cursor pointer
    .icon-zhankai1
      font-size 10px
      padding-left 5px
      cursor pointer
    .operating
      transform-origin: center top 0px;
      position: absolute;
      top: 45px;
      right: 0px;
      width: 110px;
      background: #fff;
      box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
      z-index 100
      ul
        margin 3px 0px
        li
          padding 5px 0px
        li:hover
          background #ddecfc
          cursor pointer
    .icon-gengduo
      cursor pointer
      position: absolute;
      right: 15px;
    .icon-xuanze
      font-size 12px
  .from-step
    font-size 14px
    line-height 14px
    color #3b5998
    padding 0px 5px
  .to-step
    font-size 14px
    line-height 14px
    color #aa00e8
    padding 0px 5px
  .notify1A
    font-size 12px
    line-height 14px
    color $cf-gray1
  .activity-box
    position absolute
    top 0
    right 450px
    a
     float left
  .new-skill
    width 140px
    height 44px
    img
      width 100%
  .ai-extension
    width 100px
    height 40px
    background url(../../../assets/img/X-box_button@2x.png) no-repeat
    background-size 100%
  .icon-xiaoxitongzhi,.icon-tuichu
    color #808080
  .icon-xiaoxitongzhi,.icon-tuichu
    color #808080
.tip
  .icon-tixingweizhi
    border: 1px solid $cf-level3
    border-radius: 50%
    display: inline-block
    height: 16px
    width: 16px
    text-align: center
    line-height: 16px
    font-size: 10px
    color $cf-level3
    cursor pointer
.summary
    padding-top 1px
    display -webkit-box
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space normal
.webchat-warning
  font-size: 16px
  align-items: center
  display: flex
  margin-bottom: 10px;
  .el-icon-warning
    color: #E6A23C
    font-size: 26px
    margin-right: 10px
.qc-border
  border-bottom 1px dashed #ccc
  padding-bottom 10px
  word-wrap break-word
.qc-pad10
  padding-top 10px
.unReadNum
  position: absolute;
  right: 20px;
  bottom: 5px;
  background-color: #ff6a6e;
  border-radius: 50%;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  padding: 1px 6px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
.type-menu
  .icon-xuanze
    position: absolute;
    right: 10px;
.bus-name
  color: #878787;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 220px;
.content-div
  position fixed
  left 56px
  top 52px
  width calc(100vw - 56px)
  height calc(100vh - 52px)
  background-color #fff
  z-index 1001
  overflow-y auto
  .bread-crumb
    margin-bottom 20px
    position relative
    .el-icon-close
      position absolute
      right 20px
      top 12px
      color #bfcbd9
      cursor pointer
      font-weight bold
      &:hover
        color $c-main
  .set-div
    padding 3px 10px
    .form-div
      width 500px
      margin-bottom 65px
/*.content-div.navMenuState
  left 120px
  width calc(100vw - 120px)*/
  .global-km__body
    max-height: 500px
    overflow-y: auto
  .global-km__icon
    display: inline-block
    line-height 52px
    margin-right: 10px
    cursor: pointer
  .icon-zhishikujiansuo
    color #808080
    font-size 20px
</style>
